<template>
    <div id="app-container" style="margin: 10px 50px">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  

            <el-form-item label="头像地址" prop="headUrl">
        <el-upload
            class="avatar-uploader"
            action="http://localhost:8222/user/oss/file/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="ruleForm.headUrl" :src="ruleForm.headUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
    </el-form-item>

  
  <el-form-item label="昵称" prop="nickName">
    <el-input v-model="ruleForm.nickName"></el-input>
  </el-form-item>


  <el-form-item label="手机号" prop="phone">
    <el-input v-model="ruleForm.phone"></el-input>
  </el-form-item>

  <el-form-item label="登录账号" prop="loginNo">
    <el-input v-model="ruleForm.loginNo"></el-input>
  </el-form-item>
  
  <el-form-item label="用户名" prop="username">
    <el-input v-model="ruleForm.username"></el-input>
  </el-form-item>

  <el-form-item label="院校信息" prop="departmentId">

        <el-select v-model="ruleForm.stringInfo.dept" placeholder="所属学院" @change="classInfo($event)">
          <el-option
            v-for="item in student.optionsDep"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>

        <el-select v-model="ruleForm.stringInfo.year" placeholder="所属学年">
            <el-option
              v-for="item in student.optionsYear"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>

          <el-select v-model="ruleForm.stringInfo.classname" placeholder="班级名称">
            <el-option
              v-for="item in student.optionsClass"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>

          <el-select v-model="ruleForm.stringInfo.classno" placeholder="班别">
            <el-option
              v-for="item in student.optionsClassNo"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>



    </el-form-item>

    <el-form-item label="邮箱" prop="email">
        <el-input v-model="ruleForm.email"></el-input>
    </el-form-item>

    <el-form-item label="指导老师" prop="teacherId">
        <el-select v-model="ruleForm.stringInfo.teacherName" filterable  placeholder="指导老师">
            <el-option
              v-for="item in student.optionsTeacher"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
        </el-select>

    </el-form-item>



    

  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
    </div>
</template>

<script>

import dictApi from "@/api/dict";
import studentApi from "@/api/student";

const defultForm = {
    phone: '',
    nickName: '',
    loginNo: '',
    username: '',
    departmentId: '',
    year: '',
    className: '',
    classNo: '',
    teacherId: '',
    email: '',
    headUrl: '',
    stringInfo: {
              classname: "",
              teacherName: "",
              year: "",
              classno: "",
              dept: ""
     }
}

  export default {
    data() {
      return {
        student: {
            optionsDep: [],
          optionsYear: [],
          optionsClass: [],
          optionsClassNo: [],
          optionsTeacher: []
        },
        
        ruleForm: {
            headUrl: '',
            stringInfo: {
              classname: "",
              teacherName: "",
              year: "",
              classno: "",
              dept: ""
            }
        },
        rules: {
            nickName: [
            { required: true, message: '请输入昵称', trigger: 'blur' },
            { min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur' }
          ],
          loginNo: [
            { required: true, message: '请输入登录账号', trigger: 'blur' },
            { min: 2, max: 15, message: '长度在 7 到 15 个字符', trigger: 'blur' }
          ],
          username: [
            { required: true, message: '请输入昵称', trigger: 'blur' },
            { min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur' }
          ],

          phone: [
            { required: false, message: '请输入您的手机号', trigger: 'blur' },
            { min: 11, max: 11, message: '您的手机号输入有误', trigger: 'blur' }
          ],

          departmentId: [
            { required: false, message: '请选择', trigger: 'change' }
          ],
          email: [
             { required: false, message: '请输入邮箱地址', trigger: 'blur' },
             { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
          ],
          teacherId: [
            { required: false, message: '请选择', trigger: 'change' }
          ]
         
        }
      };
    },
    created(){

      // 搜索栏学院填充
      dictApi.getDepInfo().then((resp) => {
          this.options = resp.data.list;
          console.log(this.options,"学院");
       });
        // 判断是否有参数
        if(this.$route.params && this.$route.params.id){ // 当加载页面的时候就要获取参数的值了
            this.selectById(this.$route.params.id)
        } else{
            //this.teacher = defaultFrom
            // 没有参数  清空
            this.ruleForm = {...defultForm}
        };
        this.init();
        
    },
    methods: {
        classInfo(event){

            dictApi.getClassNameInfo(event).then(resp=>{
                    this.student.optionsClass = resp.data.list;
                    console.log(resp.data.list,"班级");
            })

        },
        init(){
        // 搜索栏学院填充
        dictApi.getDepInfo().then((resp) => {
                this.student.optionsDep = resp.data.list;
            

        });
        // 学年名称填充
        dictApi.getYearInfo().then(resp=>{
            this.student.optionsYear = resp.data.list;
        })
        // 班级名称填充
       

        // 班别填充
        dictApi.getClassNoInfo().then(resp=>{
            this.student.optionsClassNo = resp.data.list;
        })

            // optionsTeacher
            dictApi.getTeacherInfo().then(resp=>{
                this.student.optionsTeacher = resp.data.list;
            })
        },

        
        selectById(id){
            studentApi.getStudentById(id).then(resp=>{
                this.ruleForm = resp.data.student;
            })
        },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if(this.ruleForm.id){
                studentApi.update(this.ruleForm).then(resp=>{
                    console.log("修改学生",this.ruleForm);
                    this.$router.push({path : "/student/list"})
                 })
             } else{
                studentApi.add(this.ruleForm).then(resp=>{
                    console.log("添加学生",this.ruleForm);
                    this.$router.push({path : "/student/list"})
                })
            }
            
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      handleAvatarSuccess(res, file) {
        console.log(res,"res");
        console.log(file,"file");
        // this.ruleForm.headUrl = URL.createObjectURL(file.raw);
        this.ruleForm.headUrl = res.data.url;
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }else{
            this.$message.success('正在上传，请稍后!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        
        return isJPG && isLt2M;
      }
    }
  }
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>